<template>
  <div class="center">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-tongji2"/>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">{{ title }}</span>
          <dv-decoration-3 class="dv-dec-3"/>
        </div>
      </div>
      <div class="bar-ranking">
        <chart-bar :category="category" :series="series"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, toRefs} from 'vue'
import ChartBar from './draw'

export default defineComponent({
  props: {
    chartBarRanking: {
      type: Object,// 引用类型的话,默认值要为函数返回值的形式!!! 1.String 2.Number 3.Boolean 4.Array 5.Object 6.Date 7.Function 8.Symbol
      require: true
    },
  },
  components: {
    ChartBar
  },
  setup(props) {
    const {chartBarRanking} = toRefs(props)
    const title = chartBarRanking.value.title
    const category = chartBarRanking.value.category
    const series = chartBarRanking.value.series
    return {title, category, series}
  }
})
</script>


<style lang="scss" scoped>
$box-width: 350px;
$box-height: 385px;

.center {
  padding: 15px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;

  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }

  .text {
    color: #c3cbde;
  }

  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }

  .bar-ranking {
    height: $box-height - 40px;
  }
}
</style>
